import React from 'react';
import { Card, Row, Col, Statistic, Spin } from 'antd';
import { ArrowUpOutlined, CommentOutlined, TagOutlined } from '@ant-design/icons';

const DashboardPage: React.FC = () => {
  // 模拟加载状态
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    // 模拟数据加载
    const timer = setTimeout(() => {
      setLoading(false);
    }, 800);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      <h1 style={{ marginBottom: 24 }}>数据概览</h1>
      
      <Spin spinning={loading}>
        <Row gutter={[16, 16]}>
          {/* 统计卡片 */}
          <Col xs={24} sm={12} lg={6}>
            <Card extra="较昨日 +2.5%">
              <Statistic
                title="总评论数"
                value={12580}
                precision={0}
                valueStyle={{ color: '#3f8600' }}
                prefix={<CommentOutlined />}
                suffix={<ArrowUpOutlined />}
              />
            </Card>
          </Col>
          
          <Col xs={24} sm={12} lg={6}>
            <Card extra="较昨日 +1.8%">
              <Statistic
                title="已标注评论"
                value={8742}
                precision={0}
                valueStyle={{ color: '#1890ff' }}
                prefix={<TagOutlined />}
                suffix={<ArrowUpOutlined />}
              />
            </Card>
          </Col>
          
          <Col xs={24} sm={12} lg={6}>
            <Card extra="较昨日 +3.2%">
              <Statistic
                title="正面评价率"
                value={68.5}
                precision={1}
                valueStyle={{ color: '#722ed1' }}
                suffix="%"
              />
            </Card>
          </Col>
          
          <Col xs={24} sm={12} lg={6}>
            <Card extra="较昨日 +2.5%">
              <Statistic
                title="模型平均准确率"
                value={89.2}
                precision={1}
                valueStyle={{ color: '#fa8c16' }}
                suffix="%"
              />
            </Card>
          </Col>
        </Row>
        
        {/* 图表区域（占位） */}
        <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
          <Col xs={24} lg={16}>
            <Card title="评论趋势分析" style={{ height: 400, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <p>评论趋势图表（此处将显示图表）</p>
            </Card>
          </Col>
          
          <Col xs={24} lg={8}>
            <Card title="标签分布" style={{ height: 400, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <p>标签分布图表（此处将显示图表）</p>
            </Card>
          </Col>
        </Row>
      </Spin>
    </div>
  );
};

export default DashboardPage;
    